<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
	window.onload = function (){
		var oForm = document.getElementById('form1');
		var oBtn = document.getElementById('btn');

		//onchange : 当值发生改变的时候触发
		/*
			text : 当光标离开并单击的时候，如果内容有变化就触发
			radio/checkbox : 标准下点击的时候只要值变了就会触发
							 IE67下，焦点离开的时候如果值变了就会触发
		*/
		oForm.username.onchange = function (){
			alert('1~内容值变了 : '+ this.value );
		}

		//alert(oForm.sex[1].checked)		//ture
		oForm.sex[0].onchange = function (){
			alert('2~单选值变了 : '+ this.value );
		}

		for (var i = 0; i < oForm.aihao.length; i++) {
			oForm.aihao[i].onchange = function (){
				alert('3~多选值变了 : '+ this.value );
			}
		};

		oForm.city.onchange = function (){
			alert('4~下拉值变了 : '+ this.value );
		}


	}
	</script>
</head>
<body>
	<form id="form1">
    	<input type="text" name="username" />
    	<input type="radio" name="sex" value="man" />男
        <input type="radio" name="sex" value="woman" checked />女
        
        <input type="checkbox" name="aihao" value="电影" />电影
        <input type="checkbox" name="aihao" value="音乐" />音乐
        <input type="checkbox" name="aihao" value="体育" />体育
        
        <select name="city" value="">
        	<option>请选择一个城市</option>
            <option value="北京">北京</option>
            <option value="上海" selected>上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
        </select>
        
        <input type="button" value="按钮" id="btn" />
        <input type="submit" value="提交" />
    </form>

</body>
</html>